<template>
  <div id="app">
    <van-config-provider class="provider" :theme-vars="themeVars">
      <div class="header">
        <!-- 等着各个组件传送门传送出来内容 -->
      </div>
      <div class="content">
        <!-- 路由视图出口 -->
        <router-view></router-view>
      </div>
      <div v-if="!$route.meta.footerHidden" class="footer">
        <!-- tabbar 组件 -->
        <!-- tabbar 加上 route 属性, 开启路由模式 -->
        <!-- 可以在 tabbar-item 标签上用 to 属性来匹配路由 -->
        <van-tabbar v-model="active" route>
          <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item to="/cate" icon="apps-o">分类</van-tabbar-item>
          <van-tabbar-item to="/cart" icon="cart-o" :badge="cartsInfo.cartsList.length">购物车</van-tabbar-item>
          <van-tabbar-item v-if="userInfo.is_login" to="/self" icon="friends-o">我的</van-tabbar-item>
          <van-tabbar-item v-else to="/self" icon="friends-o" dot>我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </van-config-provider>
  </div>
</template>

<script setup lang="ts">
// 导入全局主题样式配置
import themeVars from '@/assets/themes'
// 导入路由出口组件
import { RouterView, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
// 导入 用户存储库相关信息
import useUserInfo from '@/stores/users'
import useCartsInfo from './stores/carts'

const active = ref<number>(0)

const $route = useRoute()

const userInfo = useUserInfo()
const cartsInfo = useCartsInfo()

onMounted(() => {
  cartsInfo.getCarts()
})
</script>

<style scoped lang="scss">
#app, .provider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.provider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  > .header {
    width: 100%;
  }

  > .footer {
    height: 50px;
    width: 100%;
  }

  > .content {
    flex: 1;
    width: 100%;
    overflow: auto;
  }
}
</style>
